<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="keyword" content="">
		<meta name="description" content="">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="./base.css" media="all">
	</head>
	<body>
		
		<div style="display: table;width: 100%;table-layout: auto;">
			<div style="display: table-row;height: 50vh;background-color: antiquewhite;">
				<div style="display: table-cell;background-color: aqua;">1111</div>
				<div style="display: table-cell;background-color: aquamarine;">111111111111111111</div>
			</div>
			<div style="display: table-row;height: 50vh;background-color: antiquewhite;">
				<div style="display: table-cell;background-color: aqua;">1</div>
				<div style="display: table-cell;background-color: aquamarine;">111111111111111111</div>
			</div>
		</div>
		
		<div class="row bg-main pd-15 c-fff t-center t-lg">0123456789ABCDEFGHIJHLMNOPQRSTUVWXXYZabcdefghijklmnopqrstuvwxyz</div>
		<div class="row mt-30 space-10">
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-10</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-10</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-10</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-10</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-10</div>
			</div>
		</div>
		<div class="row mt-30 space-15">
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-15</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-15</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-15</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-15</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-15</div>
			</div>
		</div>
		<div class="row mt-30 space-20">
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-20</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-20</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-20</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-20</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-20</div>
			</div>
		</div>
		<div class="row mt-30 space-30">
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-30</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-30</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-30</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-30</div>
			</div>
			<div class="xs-1-2 sm-1-4">
				<div class="bg-main pd-15 c-fff t-center t-lg">row space-30</div>
			</div>
		</div>
		<div class="pd-15">
			<div class="">
				<div class="row align-center">
					<div class="t-bg mr-15">t-bg</div>
					<div class="tag-info tag-md mr-15">tag-info tag-md</div>
					<div class="tag-info tag-md tag-circle-md">tag-info tag-md tag-circle-md</div>
				</div>
				<div class="row align-center">
					<div class="t-lg mr-15">t-lg</div>
					<div class="tag-info mr-15">tag-info</div>
					<div class="tag-info tag-circle">tag-info tag-circle</div>
				</div>
				<div class="row align-center">
					<div class="t-md mr-15">t-md</div>
					<div class="tag-info tag-xs mr-15">tag-info tag-xs</div>
					<div class="tag-info tag-xs tag-circle-md">tag-info tag-xs tag-circle-md</div>
				</div>
				<div class="row align-center">
					<div class="t-sm mr-15">t-sm</div>
					<div class="tag-info tag-xs mr-15">tag-info tag-xs</div>
					<div class="tag-info tag-xs tag-circle-md">tag-info tag-xs tag-circle-md</div>
				</div>
				<div class="t-xs">t-xs</div>
			</div>
			<div class="mt-30"> <div class="t-bg c-default">c-default</div>
				<div class="t-bg c-main">c-main</div>
				<div class="t-bg c-second">c-second</div>
				<div class="t-bg c-assist">c-assist</div>
				<div class="t-bg c-info">c-info</div>
				<div class="t-bg c-success">c-success</div>
				<div class="t-bg c-danger">c-danger</div>
				<div class="t-bg c-warning">c-warning</div>
			</div>
			<div class="mt-30 row c-fff pd-15 b-r space-15" style="background-color: antiquewhite;">
				<div class="w-h-100 b-r flex-center bg-main">bg-main</div>
				<div class="w-h-100 b-r flex-center bg-second">bg-second</div>
				<div class="w-h-100 b-r flex-center bg-assist">bg-assist</div>
				<div class="w-h-100 b-r flex-center bg-info">bg-info</div>
				<div class="w-h-100 b-r flex-center bg-success">bg-success</div>
				<div class="w-h-100 b-r flex-center bg-warning">bg-warning</div>
				<div class="w-h-100 b-r flex-center bg-danger">bg-danger</div>
				<div class="w-h-100 b-r flex-center bg-fff">bg-fff</div>
				<div class="w-h-100 b-r flex-center bg-f5f5f5">bg-f5f5f5</div>
				<div class="w-h-100 b-r flex-center bg-default">bg-default</div>
			</div>
			
			<!-- 按钮 -->
			<div class="mt-15 ">
				<div class="btn mr-15 mt-15">btn</div>
				<div class="btn btn-line mr-15 mt-15">btn-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-second mr-15 mt-15">btn-second</div>
				<div class="btn btn-second-line mr-15 mt-15">btn-second-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-assist mr-15 mt-15">btn-assist</div>
				<div class="btn btn-assist-line mr-15 mt-15">btn-assist-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-info mr-15 mt-15">btn-info</div>
				<div class="btn btn-info-line mr-50 mt-15">btn-info-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-success mr-15 mt-15">btn-success</div>
				<div class="btn btn-success-line mr-15 mt-15">btn-success-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-warning mr-15 mt-15">btn-warning</div>
				<div class="btn btn-warning-line mr-15 mt-15">btn-warning-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-danger mr-15 mt-15">btn-danger</div>
				<div class="btn btn-danger-line mr-15 mt-15">btn-danger-line</div>
			</div>
			<div class="mt-15 row">
				<div class="btn btn-default mr-15 mt-15">btn-default</div>
				<div class="btn btn-link mr-15 mt-15">btn-link</div>
				<div class="btn btn-disabled mr-15 mt-15">btn-disabled</div>
			</div>
			
			<div class="mt-15 ">
				<div class="btn btn-lg mr-15">
					<div class="flex-center">
						<div class="w-h-20 bg-danger mr-10 circle"></div>
						<div class="">abc</div>
					</div>
				</div>
				<div class="btn mr-15">btn</div>
				<div class="btn btn-sm mr-15">btn-sm</div>
				<div class="btn btn-xs">btn-xs</div>
			</div>
			<div class="mt-15 row align-center">
				<div class="btn btn-circle btn-lg mr-15">btn-circle</div>
				<div class="btn btn-circle mr-15">btn-circle</div>
				<div class="btn btn-circle btn-sm mr-15">btn-circle</div>
				<div class="btn btn-circle btn-xs">btn-circle</div>
			</div>
			<div class="btn btn-full mt-15">btn-full</div>
			
			
			
			
			
			
			<!-- 标签 -->
			<div class="mt-15 row align-center">
				<div class="tag-info mr-15 mt-15">tag-info</div>
				<div class="tag-success mr-15 mt-15">tag-success</div>
				<div class="tag-warning mr-15 mt-15">tag-warning</div>
				<div class="tag-danger mr-15 mt-15">tag-danger</div>
				<div class="tag-default mr-15 mt-15">tag-default</div>
			</div>
			<div class="mt-15">
				<div class="tag-info tag-md  mr-15 mt-15">tag-md</div>
				<div class="tag-info tag-sm  mr-15 mt-15">tag-sm</div>
				<div class="tag-info tag-xs  mr-15 mt-15">tag-xs</div>
			</div>
			<div class="mt-15 row align-center">
				<div class="tag-info tag-md tag-circle mr-15 mt-15">tag-circle</div>
				<div class="tag-info tag-sm tag-circle  mr-15 mt-15">tag-circle</div>
				<div class="tag-info tag-xs tag-circle  mr-15 mt-15">tag-circle</div>
			</div>
			
		</div>

	</body>
	<script src="../js/sdk/translate.js"></script>
</html>